<template>
	<div class="content">
		<van-nav-bar
		title="忘记密码"
		left-arrow
		@click-left="jumpRouter('/login')"
		/>

		<div class="loginCont">
			<img src="../../asserts/images/logo.jpg" />
		</div>

		<ul class="formCont">
			<li class="liBorder">
				<input type="text" placeholder="请输入手机号">
			</li>
			<li class="liBorder">
				<input class="sms" type="text" placeholder="请输入验证码">
				<van-button :color="smsBtnColor" :disabled="smsDisabled" plain size="small">获取验证码</van-button>
			</li>
			<li class="liBorder">
				<input type="password" placeholder="新密码">
			</li>
			
			<li class="submitCont">
				<van-button class="submit" block @click="submitFunc">提交</van-button>
			</li>
			
		</ul>
	</div>
</template>

<script>
import storages from "@/utils/storage.js";

	export default {
		data() {
			return {
				smsBtnColor: '#b0bec5',
				smsBtnColors: '#ff6766',
				smsDisabled: true
			};
		},
		components: {
		},
		methods: {
			// 返回某一页
			jumpRouter(uri,querys) {
				this.$router.push({path: uri,query:querys})
			},
			// 返回上一页
			onClickLeft(){
				this.$router.go(-1)
			},
			
			submitFunc(){
				this.$notify({ type: 'warning', message: '请输入正确的验证码' });
			}
		
		
		},
		mounted() {
			
		},
		computed: {
			
		}
	};
</script>
<style scoped lang="scss">
	.content{
		height: 100%;
		background: url('../../asserts/images/login_bg.png') no-repeat;
		background-size: 100% auto; 
		background-position: 0 92%;

		.loginCont{
			margin-top: 80px;
			text-align: center;
			vertical-align: middle;
			img{
				width: 168px;
				height: auto;
			}
		}

		.formCont{
			margin-top: 20px;
			padding: 80px;
			li{
				padding-bottom: 20px;
				width: 100%;
				height: 80px;
				margin-top: 20px;

				input{
					width: 100%;
					height: 100%;
					border: none;
					font-size: 32px;
				}

				.sms{
					width: 70%;
				}

				.submit{
					border-radius: 10px;
					color: #fff;
					background: linear-gradient(90deg,#ff8472,#ff6766);
				}
			}
			.liBorder{
				border-bottom: 1px solid #eceff1;
			}
			.submitCont{
				margin-top: 80px;
			}
			p{
				margin-top: 20px;
				text-align: right;
				b{
					font-size: 28px;
					color: #999;
				}
				.b2{
					font-size: 32px;
				}
			}
		}
	}
</style>
